import React, { useEffect, useState } from 'react';
import axios from 'axios'
import { List } from 'react-vant'
import { useNavigate } from 'react-router-dom';
const Index = () => {
  const navigate = useNavigate()
  // 列表
  const [list, setList] = useState([]);
  // 分页页码
  const [pageCode, setPageCode] = useState(1)

  const getList = async () => {
    const resp = await axios.get('/api/list', { params: { pageCode } });
    // 将老数据和新数据合并拼接
    const newList = list.concat(resp.data.data)
    setList(newList);
    // 页码++
    setPageCode(pageCode + 1)
  }

  return (
    <div>
      <List onLoad={getList}>
        {
          list.map((v, i) => {
            return <dl key={i} 
              className='list-item' 
              onClick={() => navigate(`/detail/${v.id}`)}
            >
              <dt><img src={v.image[0]} alt="" /></dt>
              <dd>
                <h3>{v.title}</h3>
                <p>[{v.address}]{v.desc}</p>
                <p>
                  <span>单价：{v.price}</span>
                  <span>销售：{v.sell}</span>
                </p>
              </dd>
            </dl>
          })
        }
      </List>
    </div>
  )
}

export default Index